<template>
    <div class="container">
        <div class="text">
            <img src="@/assets/img/chang.png" alt="">
        </div>
        <div class="word">
            <h2>地铁文化</h2>
            <p>TAIYUAN METRO CULTURE</p>
        </div>
        <div class="button">
            <button>前往</button>
        </div>
        <div class="mark">
            <div class="ul">
                <CultureItem v-for="item in cultureList" :key="item.id" :img-path="item.imgPath" :text="item.text"></CultureItem>
            </div>
        </div>
    </div>
</template>

<script>
    import CultureItem from "@/components/home/culture/CultureItem";
    export default {
        name: "Culture",
        setup(){
          return {
                cultureList:[
                    {id:1,imgPath:require("@/assets/img/mark1.png"),text:"出行查询"},
                    {id:2,imgPath:require("@/assets/img/mark2.png"),text:"站点周边"},
                    {id:3,imgPath:require("@/assets/img/mark3.png"),text:"列车时刻表"},
                    {id:4,imgPath:require("@/assets/img/mark4.png"),text:"乘客须知"},
                    {id:5,imgPath:require("@/assets/img/mark5.png"),text:"购票指南"}
                ]
            }
        },
        components:{
            CultureItem
        }
    }
</script>

<style scoped lang="less">
    .container{
        margin:50px auto;
        overflow: hidden;
    }
    .container .text {
        width: 1000px;
        margin: 0px auto;
        display: flex;
        justify-content: center;
    }

    .container .text img {
        border-radius: 50px;
        opacity: .8;
    }

    .container .word {
        margin: 20px auto;
        width: 1000px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
    }

    .container .word h2 {
        width: 1000px;
        font-size: 40px;
        text-align: center;
        padding: 30px 0px 10px 0px;
    }

    .container .word p {
        width: 1000px;
        font-size: 30px;
        text-align: center;
        color:#7f7f7f;
        padding: 0px 0px 20px 0px;
    }

    .container .button {
        width: 1000px;
        height: 60px;
        margin: 20px auto;
        padding: 10px 0;
        display: flex;
        justify-content: center;
    }

    .container .button button {
        width: 80px;
        height: 40px;
        border-radius: 20px;
        border: 1px solid #b6b6b6;
        background-color: transparent;
        box-shadow: 0px 0px 5px 2px #d9d9d9;
        transition: all 0.2s ease;
    }
    .container .button button:hover {
        border: none;
        background-color: #f7bc08;
    }

    li {
        list-style: none;
        flex: 1;
        height: 125px;
        text-align: center;
        border-radius: 10%;
        margin: 0px 20px;
        padding-top: 25px;
        box-shadow: 0px 0px 5px 2px #b9b9b9;
    }

    .container .mark .ul {
        display: flex;
        justify-content: center;
        width: 800px;
        margin: 20px auto;
        padding: 20px 0;
    }

    .container .mark img {
        width: 64px;
        height: 64px;
        border-radius: 32px;
        transition: all 0.3s ease;
    }

    .container .mark p {
        width: 100%;
        padding: 10px 0;
        color: #9e9e9e;
        transition: all 0.3s ease;
    }

    .container .mark li:hover img {
        background-color: #9e9e9e22;
    }

    .container .mark li:hover p {
        color: black;
    }
</style>